<template>
  <div>
    <upload-excel :before-upload="beforeUpload" :on-success="handleSuccess" />
  </div>
</template>

<script>
import { batchEmpAPI } from '@/api/employees'
import { parseTime } from '@/utils'
export default {
  methods: {
    // 这个回调函数是上传之前调用的回调函数
    // 在这里可以对上传的文件做判断，如果不符合你的判断规则可以不往下读取
    beforeUpload(file) {
      if (/\.(xls|xlsx)$/.test(file.name)) {
        return true
      }

      // 不符合
      this.$message.warning('请选择xls或xlsx的excel文件')
      return false
    },

    // 读取成功的回调函数- 它一定要上一个钩子return true才会调用
    // 这个函数有一个参数是一个对象，对象里有results和header属性
    // 所有可以用解构语法解构出来
    // results就是excel里的内容，header就是excel里的表头
    async handleSuccess({ results, header }) {
      if (this.$route.query.ref === 'employees') {
        // 字典
        const userRelations = {
          入职日期: 'timeOfEntry',
          手机号: 'mobile',
          姓名: 'username',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment'
        }

        // 原本中文key的数组有多少个，生成的英文key的数组也要有多少，用map
        const list = results.map(v => {
          const obj = {}
          // 遍历数组里每个对象，每个对象的取出的键是中文的
          for (const zhKey in v) {
          // 要根据中文得到对应的英文
            const enKey = userRelations[zhKey]
            // v[zhKey]代表取出原本每个对象里的属性值
            // 再把值复制给新对象的英文属性名
            // 这样的操作就能让新对象既有原来的值，但是属性名是英文的了
            obj[enKey] = v[zhKey]
            if (zhKey === '入职日期' || zhKey === '转正日期') {
            // 做时间转换
              const time = (obj[enKey] - 1) * 1000 * 60 * 60 * 24
              // 但是此时这个日期对象多了70年
              const date = new Date(time)
              // 先取出多了70年的年
              const year = date.getFullYear()
              // 再设置少70年的年
              date.setFullYear(year - 70)
              // 直接再对日期对象转字符串，转成yyyy-MM-dd的格式
              obj[enKey] = parseTime(date, '{y}-{m}-{d}')
            }
          }
          return obj
        })
        // 在这里发请求，把内容传递给接口
        await batchEmpAPI(list)
        this.$message.success('导入成功！')
        this.$router.push('/employees')
      }
    }
  }
}
</script>

<style>

</style>
